<template>
  <view class="page-container w-[750rpx] bg-gray-50 mx-auto">
    <backView />
    <!-- 页面标题 -->
    <view class="page-header bg-[#27c530] text-white p-[30rpx] text-center">
      <text class="text-[32rpx] font-bold text-center">监护人信息</text>
    </view>

    <!-- 搜索栏 -->
    <view class="search-bar bg-white m-[24rpx] p-[24rpx] rounded-[20rpx] shadow-md">
      <view class="flex gap-[16rpx]">
        <nut-input v-model="searchForm.name" placeholder="搜索姓名" class="flex-1" />
        <nut-button type="primary" class="bg-[#27c530]" @click="searchRecords">搜索</nut-button>
      </view>
    </view>

    <!-- 记录列表 -->
    <view v-if="records.length === 0" class="empty-container flex flex-col justify-center items-center py-[100rpx]">
      <text class="text-[56rpx] mb-[16rpx]">👨‍👩‍👧‍👦</text>
      <text class="text-[32rpx] text-gray-500 mb-[32rpx]">暂无监护人信息记录</text>
      <!-- <nut-button type="primary" class="bg-[#27c530]" @click="goAdd">添加第一条</nut-button> -->
    </view>

    <view v-else class="records-container">
      <view v-for="record in records" :key="record.id" class="record-card bg-white m-[24rpx] rounded-[20rpx] shadow-md overflow-hidden">
        <view @click="goView(record)" class="record-header p-[24rpx] border-b border-gray-100">
          <view class="flex justify-between items-start">
            <view class="flex items-center">
              <view class="w-[80rpx] h-[80rpx] rounded-full bg-[#adddaf] flex items-center justify-center mr-[20rpx]">
                <!-- <IconFont name="my2" class="text-[40rpx]" color="#008822" /> -->
                <IconFont font-class-name="iconfont" class-prefix="icon" size="40" color="#008822" name="geren" />

              </view>
              <view>
                <text class="text-[28rpx] font-bold text-gray-800">{{ record.name }}</text>
                <text class="text-[24rpx] text-gray-500 block mt-[4rpx]">{{ record.idcard }}</text>
              </view>
            </view>
            <!-- <text class="text-[22rpx] text-gray-500">{{ formatDate(record.createTime) }}</text> -->
            <view class="px-[12rpx] py-[6rpx] bg-blue-100 rounded-[8rpx]">
              <text class="text-[22rpx] text-blue-700">📞 {{ record.phone }}</text>
            </view>
          </view>
        </view>

        <!-- 操作按钮 -->
        <!-- <view class="record-actions p-[24rpx] border-t border-gray-100 flex gap-[16rpx]">
          <nut-button size="small" type="primary" class="flex-1 bg-[#27c530]" @click.stop="goEdit(record.id)">编辑</nut-button>
          <nut-button size="small" type="danger" class="flex-1" @click.stop="deleteRecord(record.id)">删除</nut-button>
        </view> -->
      </view>
    </view>

    <!-- 悬浮添加按钮 -->
    <!-- <view class="fab-container fixed bottom-[48rpx] right-[48rpx]">
      <nut-button type="success" class="!w-[90rpx] !h-[90rpx] !p-0 flex items-center justify-center !min-w-[90rpx] min-h-[90rpx] rounded-full bg-[#27c530] shadow-lg" @click="goAdd">
        <template #icon>
          <IconFont name="plus" size="24" class="text-[48rpx] text-white" />
        </template>
      </nut-button>
    </view> -->
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import Taro from "@tarojs/taro";
import { request } from "@/service/request";
import { IconFont } from "@nutui/icons-vue-taro";
import { localStg } from "@/utils";
import backView from "@/components/backView.vue";

const records = ref<any[]>([]);
const searchForm = reactive({
  recordid: "",
  name: "",
});

onMounted(async () => {
  const params: any = Taro.getCurrentInstance().router?.params;
  const result = await request.get<any>(
    "/nurse_user/nurseUser/list",
    {
      idcard: params.idcard,
    },
    { useErrMsg: true }
  );
  console.log(result, "result---------===========");
  // form.value = result.success.records[0];
  // form.value.sex = getGenderByIdCard(id);
  // form.value.age = getAgeByIdCard(id);
  let ary: any[] = [];
  result.success.records.forEach(async (item: any) => {
    const rs = await request.get<any>(
      "/nurse_user/nurseUser/listNurseUserFamilyByMainId",
      {
        userId: item.id,
      },
      { useErrMsg: true }
    );
    ary = [...ary, ...rs.success.records];
    console.log(rs.success.records, "rs- all --------=======================");
    records.value = ary;
  });
  // console.warn(ary, "ary---------===========");
  // records.value = ary;

  // loadRecords();
});

function goView(item: any) {
  Taro.navigateTo({
    url: `./view?idcard=${item.idcard}&type=1`,
  });
}

async function loadRecords() {
  try {
    console.log("loadRecords---------=======================");
    const result = await request.get<any>(
      "/guardian/guardianInfo/list",
      {},
      {
        useErrMsg: true,
      }
    );
    console.log(result, "result---------=======================");

    if (result.success.records) {
      records.value = result.success.records || [];
    }
  } catch (error) {
    console.error("加载数据失败:", error);
    Taro.showToast({ title: "加载数据失败", icon: "error" });
  }
}

function searchRecords() {
  loadRecords();
}

function formatDate(dateStr: string) {
  if (!dateStr) return "";
  return new Date(dateStr).toLocaleDateString("zh-CN");
}

function getSelfClass(self: string) {
  switch (self) {
    case "能自理":
      return "bg-green-100";
    case "不能自理":
      return "bg-red-100";
    case "部分自理":
      return "bg-yellow-100";
    default:
      return "bg-gray-100";
  }
}

function getSelfTextClass(self: string) {
  switch (self) {
    case "能自理":
      return "text-green-700";
    case "不能自理":
      return "text-red-700";
    case "部分自理":
      return "text-yellow-700";
    default:
      return "text-gray-700";
  }
}

function getStatusClass(status: string) {
  switch (status) {
    case "正常":
      return "bg-green-100";
    case "异常":
      return "bg-red-100";
    case "待确认":
      return "bg-yellow-100";
    default:
      return "bg-gray-100";
  }
}

function getStatusTextClass(status: string) {
  switch (status) {
    case "正常":
      return "text-green-700";
    case "异常":
      return "text-red-700";
    case "待确认":
      return "text-yellow-700";
    default:
      return "text-gray-700";
  }
}

function goAdd() {
  Taro.navigateTo({
    url: "./add",
  });
}

function goEdit(id: string) {
  Taro.navigateTo({
    url: `./edit?id=${id}`,
  });
}

async function deleteRecord(id: string) {
  try {
    const result = await Taro.showModal({
      title: "确认删除",
      content: "确定要删除这条监护人信息记录吗？",
      confirmText: "删除",
      cancelText: "取消",
    });

    if (result.confirm) {
      await request.delete(
        `/guardian/guardianInfo/delete?id=${id}`,
        {},
        {
          useErrMsg: true,
        }
      );

      Taro.showToast({ title: "删除成功", icon: "success" });
      loadRecords();
    }
  } catch (error) {
    console.error("删除失败:", error);
    Taro.showToast({ title: "删除失败", icon: "error" });
  }
}
</script>

<style scoped>
.page-container {
  min-height: 100vh;
}

.page-header {
  border-radius: 0 0 20rpx 20rpx;
}

.search-bar {
  border-radius: 20rpx;
}

.record-card {
  transition: all 0.3s ease;
}

.record-card:active {
  transform: scale(0.98);
}

.fab-container {
  z-index: 1000;
}

.empty-container {
  min-height: 400rpx;
}

.records-container {
  padding-bottom: 120rpx;
}
</style>
